<template>
  <div class="settings-container">
    <el-tabs>
      <!-- 基本设置 -->
      <el-tab-pane label="基本设置">
        <el-form
          :model="basicSettings"
          label-width="120px"
          class="settings-form"
        >
          <el-form-item label="餐厅名称">
            <el-input v-model="basicSettings.restaurantName" />
          </el-form-item>
          
          <el-form-item label="营业时间">
            <el-time-picker
              v-model="basicSettings.openTime"
              format="HH:mm"
              placeholder="开始时间"
            />
            <span class="time-separator">至</span>
            <el-time-picker
              v-model="basicSettings.closeTime"
              format="HH:mm"
              placeholder="结束时间"
            />
          </el-form-item>
          
          <el-form-item label="配送范围(km)">
            <el-input-number
              v-model="basicSettings.deliveryRange"
              :min="1"
              :max="20"
            />
          </el-form-item>
          
          <el-form-item label="起送金额">
            <el-input-number
              v-model="basicSettings.minOrderAmount"
              :min="0"
              :precision="2"
            />
          </el-form-item>
          
          <el-form-item label="配送费">
            <el-input-number
              v-model="basicSettings.deliveryFee"
              :min="0"
              :precision="2"
            />
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <!-- 分类管理 -->
      <el-tab-pane label="分类管理">
        <div class="category-management">
          <div class="category-list">
            <el-tag
              v-for="category in categories"
              :key="category"
              closable
              @close="handleDeleteCategory(category)"
              style="margin-right: 10px; margin-bottom: 10px"
            >
              {{ category }}
            </el-tag>
          </div>
          
          <div class="category-input">
            <el-input
              v-model="newCategory"
              placeholder="输入新分类名称"
              style="width: 200px"
            >
              <template #append>
                <el-button @click="handleAddCategory">
                  添加
                </el-button>
              </template>
            </el-input>
          </div>
        </div>
      </el-tab-pane>

      <!-- 标签管理 -->
      <el-tab-pane label="标签管理">
        <div class="tag-management">
          <div class="tag-list">
            <el-tag
              v-for="tag in tags"
              :key="tag"
              closable
              @close="handleDeleteTag(tag)"
              style="margin-right: 10px; margin-bottom: 10px"
            >
              {{ tag }}
            </el-tag>
          </div>
          
          <div class="tag-input">
            <el-input
              v-model="newTag"
              placeholder="输入新标签名称"
              style="width: 200px"
            >
              <template #append>
                <el-button @click="handleAddTag">
                  添加
                </el-button>
              </template>
            </el-input>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div class="settings-actions">
      <el-button type="primary" @click="handleSaveSettings">
        保存设置
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

const store = useStore()

const basicSettings = reactive({
  restaurantName: '',
  openTime: '',
  closeTime: '',
  deliveryRange: 5,
  minOrderAmount: 20,
  deliveryFee: 5
})

const categories = ref<string[]>([])
const tags = ref<string[]>([])
const newCategory = ref('')
const newTag = ref('')

// 加载设置
const loadSettings = async () => {
  try {
    const response = await fetch('http://localhost:8080/api/admin/settings', {
      headers: {
        'Authorization': `Bearer ${store.state.token}`
      }
    })
    const data = await response.json()
    if (response.ok) {
      Object.assign(basicSettings, data.settings)
      categories.value = data.categories
      tags.value = data.tags
    }
  } catch (error) {
    ElMessage.error('加载设置失败')
  }
}

// 保存设置
const handleSaveSettings = async () => {
  try {
    const response = await fetch('http://localhost:8080/api/admin/settings', {
      method: 'PUT',
      headers: {
        'Authorization': `Bearer ${store.state.token}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        settings: basicSettings,
        categories: categories.value,
        tags: tags.value
      })
    })
    
    if (response.ok) {
      ElMessage.success('保存成功')
    }
  } catch (error) {
    ElMessage.error('保存失败')
  }
}

// 添加分类
const handleAddCategory = () => {
  if (!newCategory.value) {
    ElMessage.warning('请输入分类名称')
    return
  }
  if (categories.value.includes(newCategory.value)) {
    ElMessage.warning('该分类已存在')
    return
  }
  categories.value.push(newCategory.value)
  newCategory.value = ''
}

// 删除分类
const handleDeleteCategory = (category: string) => {
  const index = categories.value.indexOf(category)
  if (index !== -1) {
    categories.value.splice(index, 1)
  }
}

// 添加标签
const handleAddTag = () => {
  if (!newTag.value) {
    ElMessage.warning('请输入标签名称')
    return
  }
  if (tags.value.includes(newTag.value)) {
    ElMessage.warning('该标签已存在')
    return
  }
  tags.value.push(newTag.value)
  newTag.value = ''
}

// 删除标签
const handleDeleteTag = (tag: string) => {
  const index = tags.value.indexOf(tag)
  if (index !== -1) {
    tags.value.splice(index, 1)
  }
}

onMounted(() => {
  loadSettings()
})
</script>

<style scoped>
.settings-container {
  padding: 20px;
}

.settings-form {
  max-width: 600px;
  margin-top: 20px;
}

.time-separator {
  margin: 0 10px;
}

.category-management,
.tag-management {
  margin-top: 20px;
}

.category-list,
.tag-list {
  margin-bottom: 20px;
}

.settings-actions {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
</style> 